<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="./images/favicon.ico" type="image/x-icon">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/info.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./icontfont/iconfont.css">
</head>

<body>
    <div class="head">
        <div class="head-top">
            <ul class="head-top-nav">
                <li>
                    <a href="javascript:;">品牌</a>
                </li>
                <li>
                    <a href="javascript:;">Funtouch OS</a>
                </li>
                <li>
                    <a href="javascript:;">体验店</a>
                </li>
                <li>
                    <a href="javascript:;">政企业务</a>
                </li>
                <li>
                    <a href="javascript:;">社区</a>
                </li>
            </ul>
            <div class="head-top-user">
                <a class="user-car" href="./shop-car.html">购物车</a>
                <div class="user hide">
                    <a href="./login.html" class="login">登录</a>
                    <span>|</span>
                    <a href="./res.html" class="res">注册</a>
                </div> 
                <div class="person">
                    <p class="inner-person">退出登录</p>

                </div>
            </div>
        </div>

        <div class="head-btm">
            <div class="head-warp">
                <a href="./index.html" class="index-logo"><img src="./img/login-logo.png" alt=""></a>
                <span class="iconfont">&#xe637;</span>
                <ul class="head-btm-nav">
                    <li>
                        <a href="javascript;">NEX系列</a>
                    </li>
                    <li>
                        <a href="javascript;">X系列</a>
                    </li>
                    <li>
                        <a href="javascript;">S系列</a>
                    </li>
                    <li>
                        <a href="javascript;">Y系列</a>
                    </li>
                    <li>
                        <a href="javascript;">iQOO手机</a>
                    </li>
                    <li>
                        <a href="javascript;">智能硬件</a>
                    </li>
                    <li>
                        <a href="javascript;">商城</a>
                    </li>
                    <li>
                        <a href="javascript;">服务</a>
                    </li>
                </ul>

            </div>

        </div>
    </div>
    <div class="selection">
        <div class="wapper">
            <p>
                <a href="index.html">商城首页</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:;">智能手机</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span></span>
            </p>
        </div>
        <div class="content clear">
            <!-- 左边盒子 -->
            <div class="Details auto clearfix">
                <div class="smlimg">
                  <div class="smlbox">
                      <img src="" alt="">
                      <span></span>
                      <em></em>
                  </div>
                  <div >
                    <ul class="magnifier">
                  


                  </ul>
                  </div>
                </div>
                <div class="bigimg">
                  <img src="" alt="">
                </div>
              
              </div>
            <!-- 右边盒子 -->
            <div class="right-box">
                <h1 class="name"></h1>
                <p class="info">
                    <span style="color: red;">
                    【①12期免息；②赠iQOO耳机；③学生购机赠背包】</span>
                </p>
                <div class="summary clear">
                    <div class="summary-pic"><span>￥</span><i></i></div>
                    <div class="summary-activity">
                        <div class="int"><span>赠品</span><i>购物送积分</i></div>
                    </div>
                </div>
                <div class="support">
                    <i>商品支持&nbsp;:</i>
                    <span>
                        <i class="iconfont">&#xe657;</i>花呗分期
                        <div>
                            <h3>
                                <i class="iconfont">&#xe657;</i>支持花呗分期
                            </h3>商品支持花呗分期
                        </div>
                    </span>
                    <span><i class="iconfont">&#xe657;</i>以旧换新
                        <div class="encourage">
                            <h3>
                                <i class="iconfont">&#xe657;</i>可以使用换新鼓励金
                            </h3>换新鼓励金通过参加以旧换新回收旧手机以后获得，旧手机享受额外补贴
                        </div>
                    </span>
                </div>
                <p class="moudle-title">版本</p>
                <ul class="moudle-list clear">
                    <li class="specs-1">5G版&nbsp;8GB+128GB</li>
                    <li class="specs-1">5G版&nbsp;8GB+256GB</li>
                    <li class="specs-1">5G版&nbsp;12GB+512GB</li>
                    <li class="specs-1">5G版&nbsp;12GB+1TB</li>
                </ul>
                <p class="moudle-title">颜色</p>
                <ul class="moudle-list clear">
                    <li class="specs-1"><span style="border: none;
                        background-color: rgb(158, 160, 168);
                        background-image: linear-gradient(to right bottom, rgb(158, 160, 168), rgb(27, 30, 42));display: inline-block;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 23px;
                        height: 23px;
                        border-radius: 50%;
                        margin-right: 8px;
                        vertical-align: text-bottom;
                        background-repeat: no-repeat;"></span>深空</li>
                    <li class="specs-1" style="text-decoration:line-through;color: gray;"><span style="border: none;
                        background-color: rgb(40, 46, 47);
                        background-image: linear-gradient(to right bottom, rgb(40, 46, 47), rgb(125, 133, 135));display: inline-block;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 23px;
                        height: 23px;
                        border-radius: 50%;
                        margin-right: 8px;
                        vertical-align: text-bottom;
                        background-repeat: no-repeat;
                    "></span>传奇版</li>
                    <li class="specs-1" style="color:gray;"><span class="spec-item-color" style="border: none;
                        background-color: rgb(211, 196, 214);
                        background-image: linear-gradient(to right bottom, rgb(211, 196, 214), rgb(127, 224, 252));
                        display: inline-block;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 23px;
                        height: 23px;
                        border-radius: 50%;
                        margin-right: 8px;
                        vertical-align: text-bottom;
                        background-repeat: no-repeat;"></span>琦光焕彩</li>
                    <li class="specs-1" style="color:gray;"><span style="border: none;
                        background-color: rgb(199, 241, 78);
                        background-image: linear-gradient(to right bottom, rgb(199, 241, 78), rgb(230, 252, 112));display: inline-block;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 23px;
                        height: 23px;
                        border-radius: 50%;
                        margin-right: 8px;
                        vertical-align: text-bottom;
                        background-repeat: no-repeat;"></span>青柠</li>
                </ul>
                <div class="num-title">数量</div>
                <div class="count">
                    <span class="reduce">-</span>
                    <input type="text" value="1" max="5" class="number" readonly="readonly">
                    <span class="add">+</span>
                    
                </div>
                <div class="action clear">
                    <a href="./shop-car.html">
                        <button class="shop-car">加人购物车</button>
                    </a>
                    <a href="./shop-car.html">
                       <button class="buy">立即购买</button>
                    </a>
                </div>
            </div>
        </div>

    </div>
    <!-- 选项卡 -->
    <div class="box">
        <ul class="box-current">
            <li class="current">商品详细信息&nbsp;&nbsp;&nbsp;&nbsp;|</li>
            <li>包装及规格参数 &nbsp;&nbsp;&nbsp;&nbsp;|</li>
            <li>评价(2535)&nbsp;&nbsp;&nbsp;&nbsp;|</li>
            <li>售后服务&nbsp;&nbsp;&nbsp;&nbsp;|</li>
        </ul>
        <div class="bottom">
            <div class="cont1">
              <img src="./img/imgs/xuanxiangka.jpg" alt="">
            </div>
            <div class="cont2">
           <img src="./img/imgs/baozhuang.jpg" alt="">
           <img src="./img/imgs/baozhuang2.jpg" alt="">
            </div>
            <div class="cont3">
            <img src="./img/imgs/gongneng2.jpg" alt="">
            <img src="./img/imgs/gongneng3jpg.jpg" alt="">
            <img src="./img/imgs/gongneng4.jpg" alt="">
            </div>
            <div class="cont4">
               <img src="./img/imgs/shouhou.jpg" alt="">
               <img src="./img/imgs/shouhou2.jpg" alt="">
               <img src="./img/imgs/shouhou3.jpg" alt="">
               <img src="./img/imgs/shouhou4.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="foot-nav">
            <ul class="foot-list clear">
                <li><span></span>官方正品</li>
                <li><span></span>顺丰极速达</li>
                <li><span></span>全国联保</li>
                <li><span></span>免费定制</li>
            </ul>
        </div>
        <div class="foot-warp">
            <ul class="foot-warp-list">
                <li>
                    <dl>
                        <dt>热门链接</dt>
                        <dt><a href="javascript:;">X27</a></dt>
                        <dt><a href="javascript:;">iQOO</a></dt>
                        <dt><a href="javascript:;">Z3</a></dt>
                        <dt><a href="javascript:;">vivo摄影</a></dt>
                        <dt><a href="javascript:;">查找手机</a></dt>
                        <dt><a href="javascript:;">常见问题</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>在线购买</dt>
                        <dt><a href="javascript:;">官方商城</a></dt>
                        <dt><a href="javascript:;">选购手机</a></dt>
                        <dt><a href="javascript:;">选购配件</a></dt>
                        <dt><a href="javascript:;">政企服务</a></dt>
                        <dt><a href="javascript:;">以旧换新</a></dt>
                        <dt><a href="javascript:;">服务保障</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>服务支持</dt>
                        <dt><a href="javascript:;">服务首页</a></dt>
                        <dt><a href="javascript:;">服务网点查询</a></dt>
                        <dt><a href="javascript:;">真伪查询</a></dt>
                        <dt><a href="javascript:;">预约维修</a></dt>
                        <dt><a href="javascript:;">维修配件价格</a></dt>
                        <dt><a href="javascript:;">服务政策</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>vivo社区</dt>
                        <dt><a href="javascript:;">社区首页</a></dt>
                        <dt><a href="javascript:;">摄影专区</a></dt>
                        <dt><a href="javascript:;">微博</a></dt>
                        <dt><a href="javascript:;">贴吧</a></dt>
                        <dt><a href="javascript:;">兴趣部落</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>关于vivo</dt>
                        <dt><a href="javascript:;">vivo简介</a></dt>
                        <dt><a href="javascript:;">工作机会</a></dt>
                        <dt><a href="javascript:;">新闻资讯</a></dt>
                        <dt><a href="javascript:;">采购平台</a></dt>
                        <dt><a href="javascript:;">供应商协同平台</a></dt>
                        <dt><a href="javascript:;">开放平台</a></dt>
                    </dl>
                </li>
            </ul>
            <div class="foot-concat">
                <a href="javascript:;">
                    <span></span> 在线客服
                </a>
                <div class="hot-line">
                    <span>400-678-9688</span>
                    <p>24小时全国服务热线</p>
                </div>
                <div class="foot-vivo">
                    <span>关注vivo</span>
                    <div>
                        <a href="javascript:;"><span class="iconfont">&#xe66b;</span></a>
                        <a href="javascript:;"><span class="iconfont">&#xe63c;<div><img src="../www/img/er-wx.jpg" alt=""><p>生活号：vivo智能手机</p></div></span></a>
                        <a href="javascript:;"><span class="iconfont">&#xe60f;<div class="zf"><img src="../www/img/zf.jpg" alt=""><p>生活号：vivo智能手机</p></div></span></a>
                    </div>
                </div>
            </div>
            <div class="foot-bottom">
                <p>Copyright ©2011-2019 广东步步高电子工业有限公司 版权所有 保留一切权利 |
                    <a href="javascript:;">隐私政策</a> |
                    <a href="javascript:;">法律声明</a> |
                    <a href="javascript:;">粤B2-20080267</a> |
                    <a href="javascript:;">粤ICP备05100288号 </a>
                    <a href="javascript:;"><img src="../www/img/c.png" alt=""></a>|
                    <a href="javascript:;">中国</a>

                </p>
            </div>
        </div>
    </div>

</body>
<!-- <script src="./js/ajax.js"></script> -->
<script src="./js/info.js"></script>
<script src="./js/info-cart.js"></script>

</html>